<template>
  <!-- DONE -->
  <div class="activity">
    <el-tabs v-model="activeName" type="card" class="elTabs">
      <el-tab-pane name="first">
        <div slot="label" class="pageHeader">工作流部署管理</div>
      </el-tab-pane>
    </el-tabs>
    <div class="container">
      <div class="addDeleteBar">
        <el-button class="searchButton" @click="startActivity"
          ><span class="plus">+</span>工作流部署</el-button
        >
        <el-button
          class="resetButton"
          @click="endActivity"
          icon="el-icon-delete"
          >工作流解除部署</el-button
        >
      </div>
      <div class="table">
        <el-table
          style="width: 100%"
          v-loading="loading"
          ref="multipleTable"
          class="tableArea"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="43" align="center">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="工作流名称"
            prop="name"
            :show-overflow-tooltip="true"
            align="left"
            width="170"
          ></el-table-column>
          <el-table-column
            label="工作流版本"
            prop="version"
            :show-overflow-tooltip="true"
            align="center"
          ></el-table-column>
          <el-table-column
            label="bpmn文件名"
            prop="resourceName"
            fixed="right"
            width="300"
            :show-overflow-tooltip="true"
            align="left"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {
  activityStart,
  activityEnd,
  listActiviti,
} from "@/api/system/activity";
export default {
  data() {
    return {
      activeName: "first",
      loading: false,
      tableData: [],
    };
  },
  components: {},
  created() {
    this.getList();
  },
  mounted() {},
  computed: {},
  methods: {
    //查询工作流列表
    getList() {
      this.loading = true;
      listActiviti().then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //清空列表选择
    clearSelect() {
      this.$refs.multipleTable.clearSelection();
    },
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
      this.selectedNum = val.length;
      this.multiple = !val.length;
    },
    //开启工作流
    startActivity() {
      activityStart().then((response) => {
        this.$modal.msgSuccess("工作流部署成功");
        this.getList();
      });
    },
    //结束工作流
    endActivity() {
      activityEnd().then((response) => {
        this.$modal.msgError("成功移除工作流");
      });
    },
  },
};
</script>
<style scoped lang='scss'>
@import "../../../assets/styles/variables.scss";
.activity {
  height: 100%;
  //新增按钮
  .searchButton {
    border: 0px;
    width: 130px;
    height: 32px;
    background: $form-button-background-color;
    border-radius: 3px;
    font-size: $form-button-font-size;
    margin-right: 10px;
    font-family: $font-family;
    font-weight: $form-button-font-weight;
    letter-spacing: 0;
    color: #fefbfb;
    line-height: 10px;
    letter-spacing: 2px;
  }

  //重置按钮
  .resetButton {
    width: 170px;
    border: 1px solid #2985f7;
    border-radius: 2px;
    height: 32px;
    background: #fff;
    font-size: $form-button-font-size;
    font-family: $font-family;
    line-height: 9px;
    font-weight: $form-button-font-weight;
    letter-spacing: 0;
    color: #598af9;
    letter-spacing: 2px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 0px;
  }
  ::v-deep .el-tabs--card .el-tabs__header {
    background-color: #e4e7ed;
  }
  ::v-deep.el-tabs--card .el-tabs__header .el-tabs__item {
    border-radius: 10px solid black;
    background-color: #fff;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #053ef6;
    line-height: 48px;
    margin-top: 0;
  }
  .el-tabs--card {
    margin-left: 10px;
    border: 0px !important;
  }
}
</style>